<template>
  <div class="app-container" v-loading="loading">
    <iframe
      src="https://pinia.vuejs.org/zh/"
      width="100%"
      height="100%"
      frameborder="0"
    ></iframe>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "Pinia",
  inheritAttrs: false,
});
const loading = ref(false);
</script>
<style lang="scss" scoped>
/** 关闭tag标签  */
.app-container {
  /* 50px = navbar = 50px */
  height: calc(100vh - 50px);
}

/** 开启tag标签  */
.hasTagsView {
  .app-container {
    /* 84px = navbar + tags-view = 50px + 34px */
    height: calc(100vh - 84px);

    iframe {
      background-color: #fff;
      box-shadow: 0px 0px 12px rgba(3, 8, 72, 0.08);
    }
  }
}
</style>
